<template>
  <div ref="echartId" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ThinChart',
  props: {
    title: {
      type: String,
      default: ""
    },
    x_data:{
      type: Array,
      default: () => []
    },
    seriesData:{
      type: Array,
      default: () => []
    },
    method:{
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: '90%'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      chart: null,
      chartData: {
            title: {
                text: '飞行直方图'
            },
            toolbox: {                   
		      show: true,                  
		      feature: {                     
			      dataZoom:{                        
				      realtime: false,                         
				      yAxisIndex: 'none',                      
			      },                    
			      restore: {},                   
		      }            
	        },       
            tooltip: {},
            xAxis: {
                name: '间隔(' + this.method + ')',
                boundaryGap: false,
                axisLabel:{
                    rotate: '45',
                    interval: 0,
                },
                data: this.x_data
            },
            yAxis: {
                name: '条目数'
            },
            series: [{
                name: '次数',
                type: 'bar',
                barWidth:3,
                color: '#00388a',
                label: {
                    show: true,
                    formatter: (params) => {if(params.value == 0) {return ""} else {return params.value}},
                    position: 'top'
                },
                areaStyle:{color: "#cff4a4"},
                data: this.seriesData
            }]
        
      }
    }
  },
  watch:{
    chartData: {
      deep: true,
      handler (val) {
        this.chart.setOption(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.echartId)
      this.chart.setOption(this.chartData)
    }
  }
}
</script>

<style scoped>

</style>
